<template>
  <section class="carTypeConfig">
    <el-dialog
      v-dialogDrag
      title="图片管理"
      :visible.sync="curPopupsVisible"
      width="1000px"
      center
      @close="sendCode"
      :close-on-click-modal="false"
      :append-to-body="true"
      ref="dialogMultipleTable"
    >
      <dialogHeader slot="title" :title="'图片管理'" :styleType="$store.state.app.dialogType"></dialogHeader>
      <one-table-template
        ref="multipleTable"
        :dynamicButtons="tableButtons"
        :dynamicComponents="tableComponents"
        :dynamicApiConfig="apiConfig"
        :dynamicTableCols="tableCols"
        :dynamicFormFields="formField"
        :dynamicIsShowSelect="isMul"
        :key="popupsTableKey"
      />
    </el-dialog>
  </section>
</template>
<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import { valueObjectMixins } from "@/components/mixins/valueObjectMixins";
import { crmApis } from "@/api/apiList/crm";
import OneTableTemplate from "@/components/crm/commonComponents/crmPopupsOneTable";
export default {
  // 组件混入对象：{data[listQuery] methods[queryTable]}
  mixins: [oneTableWithViewTemplateMixins, valueObjectMixins],
  components: {
    OneTableTemplate,
    dialogHeader: () => import("@/components/dialogHeader") //弹窗标题
  },
  data() {
    return {
      // 网格查询API配置对象
      carOrpic: "",
      apiConfig: crmApis.crmDbPictureQueryFindAll,
      // 动态组件-按钮
      tableButtons: [
        {
          compKey: "btnKey1",
          type: "primary",
          size: "small",
          clickEvent: () => this.queryTable(1),
          text: "查询",
          position: "top"
        },
        {
          compKey: "btnKey2",
          type: "primary",
          size: "small",
          clickEvent: () => this.sendCoded(),
          text: "确认",
          position: "bottom"
        },
        {
          compKey: "btnKey3",
          type: "",
          size: "small",
          clickEvent: () => this.reset(),
          text: "重置",
          position: "top"
        }
      ],
      // 动态组件-查询条件
      tableComponents: [
        {
          compKey: "compKey1",
          labelName: "图片类型",
          codeField: "functionCode",
          textField: "functionName",
          lookuptype: crmApis.crmDbFuncTypeQueryFindAll,
          sendChangeCode: this.sendChangeCode,
          component: () =>
            import(
              "@/components/crm/crmEjectWindows/crmimageManage/apiDropList"
            ),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          isRequire: true
        },
        {
          compKey: "compKey2",
          labelName: "素材类别",
          codeField: "picTypeId",
          textField: "picTypeName",
          lookuptype: crmApis.crmDbPicTypeQueryFindAll,
          component: () =>
            import(
              "@/components/crm/crmEjectWindows/crmimageManage/apiDropList"
            ),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          show: true
        },
        {
          compKey: "compKey3",
          labelName: "图片名称",
          codeField: "picName",
          component: () =>
            import(
              "@/components/crm/crmEjectWindows/crmimageManage/crmTextInput"
              // "@/views/crm/marketCRM/HDNRGL/selfCardSet/crmTextInput"
            ),

          type: "inputText",
          isMust: true,
          show: true
        },

        {
          compKey: "compKey4",
          labelName: "车辆品牌",
          codeField: "carBrandCode",
          textField: "carBrandCn",
          lookuptype: crmApis.mdmCarBrandQueryByPage,
          component: () =>
            import(
              "@/components/crm/crmEjectWindows/crmimageManage/singleDropList"
            ),
          type: "dropdownList",
          isMust: true,
          isMul: false,
          // isRequire:true,
          show: false
        },
        {
          compKey: "carBrandCode",
          labelName: "车系名称",
          codeField: "carSeriesCode",
          textField: "carSeriesCn",
          lookuptype: crmApis.mdmVeCarSeriesQueryListForPage,
          changeCodeArray: [{ changCode: "carBrandCode" }],
          component: () =>
            import(
              "@/components/crm/crmEjectWindows/crmimageManage/secondDropList"
            ),
          type: "dropdownList",
          // isRequire:true,
          isMust: true,
          show: false
        },
        {
          compKey: "compKey6",
          labelName: "颜色",
          codeField: "carColorCode",
          lookuptype: "UC0036",
          component: () =>
            import(
              "@/components/crm/crmEjectWindows/crmimageManage/lookupvalue"
            ),
          type: "dropdownList",
          isMust: true,
          show: false
          // isRequire:false
        },
        {
          compKey: "compKey7",
          labelName: "是否启用",
          codeField: "isEnable",
          disabled: true,
          component: () => import("@/components/crm/Select/crmIsEnable"),
          type: "dropdownList",
          isMust: true
        }
      ],
      // 动态生成网格列
      tableCols: [
        {
          prop: "functionName",
          label: "图片类型",
          width: null,
          align: "center"
        },
        {
          prop: "picTypeName",
          label: "素材类别",
          width: null,
          align: "center"
        },
        { prop: "picName", label: "图片名称", width: null, align: "center" },
        {
          prop: "carSeriesCn",
          label: "车系名称",
          width: null,
          align: "center",
          hidden: true
        },
        {
          prop: "picAddress",
          label: "图片地址",
          width: null,
          align: "center",
          hidden: true
        },
        {
          prop: "picId",
          label: "图片ID",
          width: null,
          align: "center",
          hidden: true
        }
      ],
      //表单查询数据（查询条件）
      formField: {
        isEnable: "1",
        picName: "",
        picTypeId: "",
        functionCode: "",
        carBrandCode: "",
        carSeriesCode: "",
        oemCode: "1",
        groupCode: "1"
      },
      handleTableRowData: {
        value: "picId",
        text: "picIName"
      }
    };
  },
  methods: {
    //卡券类型联动
    sendChangeCode(val, text) {
      let that = this;
      debugger;
      this.$refs.multipleTable.list = [];
      if (val == "F_CARSERIES") {
        this.$refs.multipleTable.$refs.compKey2[0].showow = false;
        this.$refs.multipleTable.$refs.compKey3[0].showow = false;
        this.$refs.multipleTable.$refs.compKey4[0].showow = true;
        this.$refs.multipleTable.$refs.compKey6[0].showow = true;
        this.$refs.multipleTable.$refs.carBrandCode[0].showow = true;
        this.tableCols[1].hidden = true;
        this.tableCols[2].hidden = true;
        this.tableCols[3].hidden = false;
        this.tableCols[1].prop = "carSeriesCn";
        this.carOrpic = "carSeriesCn";
      } else {
        this.$refs.multipleTable.$refs.compKey2[0].showow = true;
        this.$refs.multipleTable.$refs.compKey3[0].showow = true;
        this.$refs.multipleTable.$refs.compKey4[0].showow = false;
        this.$refs.multipleTable.$refs.compKey6[0].showow = false;
        this.$refs.multipleTable.$refs.carBrandCode[0].showow = false;
        this.tableCols[1].hidden = false;
        this.tableCols[2].hidden = false;
        this.tableCols[3].hidden = true;
        this.tableCols[1].prop = "picTypeName";
        this.carOrpic = "picName";
      }
    },
    sendCoded() {
      let parent = this.$utils.getHasFormFieldParentComponent(this.$parent);
      parent.tableComponents[4].textField = this.carOrpic;
      this.sendCode("picId", this.carOrpic);
    }
  }
};
</script>
